<template>

  <a-tree :treeData="treeData" @select="myselect" >
	    <template  #title="{ title, id}" >	     
	       <span>{{ title }}</span>

         <span><SmileOutlined/></span>

         <Dropdown            
          placement="bottom"     
          :open="isOpened(id)"          
          >                    
         <span  @click="setDropdownId(id)"
          >
          <MoreOutlined />
        </span>
         <template #overlay>
          <div  @mouseleave="setDropdownIdNull">
                  <Menu mode="vertical">                    
                    <MenuItem @click="createUser(id)">
                       新建组织
                    </MenuItem>
                    <MenuItem @click="updateUser(id)">
                       编辑组织
                    </MenuItem>
                  </Menu>
                  </div>
                </template>
         </Dropdown>	     
	   </template>
</a-tree>

</template>
<script lang="ts" setup>
import { ref } from 'vue';
import { DownOutlined, SmileOutlined, FrownOutlined, FrownFilled,MoreOutlined } from '@ant-design/icons-vue';
import { Dropdown,Menu } from 'ant-design-vue'
import type { TreeProps } from 'ant-design-vue';
const dropdownId = ref('')

const isOpened=(id)=>{
   


  return dropdownId.value ==id;

};

const createUser= (id) =>{
  window.event?.stopPropagation();   
  alert("新建"+id);
    dropdownId.value = "";

};
const updateUser= (id) =>{
  alert("更新"+id);
};
 
 
 
 
 const setDropdownIdNull=() =>
{   
  //debugger;
  window.event?.stopPropagation();   
  dropdownId.value = "";
  
};

const setDropdownId=(id) =>
{   
  window.event?.stopPropagation();   
   //alert(dropdownId.value);
   //alert(id);
   dropdownId.value = id;
   //alert(dropdownId.value);
};

const alertMsg = (title) => {
  alert(title);
};


 
const myselect=( selectedKeys, event)=>{
  // 设置模板可见不可见
     //treeData[1]

};



const treeData: TreeProps['treeData'] = [{
          title: "山东Duster集团",
          id:1,
          key: 1,//唯一标识
          area: 100,
          scopedSlots: {
            title: 'custom'
          },
          children: [{
          		title: "研发部",
              id:2,
		          key: 11,//唯一标识
		          area: 110,
		          scopedSlots: {
		            title: 'custom'
		          },
          },{
          		title: "营销部",
              id:3,
		          key: 12,//唯一标识
		          area: 310,
		          scopedSlots: {
		            title: 'custom'
		          },
          }]
}];

</script>

